<template>
  <div class="statistics">
    <div class="navBox">
      <div class="nav" :class="{ active: item.value == navActive }" v-for="(item, index) in navList" :key="index"
        @click="navClick(item.value)">
        {{ item.name }}
      </div>
    </div>
    <div class="timeNavBox">
      <div class="timeNav" :class="{ timeActive: item.value == timeNavavActive }" v-for="(item, index) in timeNavList"
        :key="index" @click="timeNavClick(item.value)">
        {{ item.name }}
      </div>
    </div>
    <div class="navBox searchBox">
      <div class="navBoxLeft">
        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" style="margin-right: 20px;width: 300px;" value-format="yyyy-MM-dd"
          @change="timeChange">
        </el-date-picker>

        <el-input placeholder="请输入内容" clearable suffix-icon="el-icon-search" v-model="keyword"
          style="margin-right: 20px;width: 300px;">
        </el-input>
      </div>
      <div class="navBoxRight">
        <el-button @click="exportClick">导出</el-button>
        <el-button @click="initClick">重置</el-button>
        <el-button @click="searchClick" type="primary">搜索</el-button>
      </div>
    </div>
    <tableView ref="tableViewRef" v-loading="loading" @handleCurrentChange="handleCurrentChange"></tableView>
  </div>
</template>
<script>
import tableView from './components/table.vue'
import {
  qryProtectSchoolPage,
  qryProtectSchoolCount,
  qryPointPage,
  qryPointCount,
  qryDoublePatrolPage,
  qryDoublePatrolCount,
  qryRoadListPage,
  qryRoadCount,
  qryTrafficListPage,
  qryTrafficCount,
  qryTenListPage,
  qryTenCount,
  qryPatrolPage,
  qryPatrolCount,
  exportProtectSchool,
  exportPoint,
  exportDoublePatrol,
  roadExport,
  trafficExport,
  tenExport,
  exportPatrol
} from '@/api/statistics'
export default {
  name: 'statistics',
  components: {
    tableView
  },
  data() {
    return {
      navList: [{
        name: '护校点',
        value: 1
      }, {
        name: '必到点',
        value: 2
      }, {
        name: '双进巡查点',
        value: 3
      }, {
        name: '路长制',
        value: 4
      }, {
        name: '交通整治',
        value: 5
      }, {
        name: '十人十车',
        value: 6
      }, {
        name: '巡逻打卡',
        value: 7
      }],
      navActive: 1,
      timeNavList: [{
        name: '今日',
        value: 'D'
      }, {
        name: '本周',
        value: 'W'
      }, {
        name: '本月',
        value: 'M'
      }],
      timeNavavActive: "D",
      time: '',
      keyword: '',
      tableApi: null,
      totleApi: null,
      exportApi: null,
      loading: false
    }
  },
  created() {
  },
  mounted() {
    this.$refs.tableViewRef.setTableLable(this.navActive)
    this.setSwitchApi(this.navActive)
  },
  methods: {
    timeChange() {
      console.log(this.time)
      if (this.time == null) {
        this.timeNavavActive = 'D'
      } else {
        this.timeNavavActive = ''
      }
      this.setSwitchApi(this.navActive)
    },
    navClick(val) {
      this.navActive = val
      this.$refs.tableViewRef.setTableLable(this.navActive)
      this.$refs.tableViewRef.page = 1
      this.setSwitchApi(this.navActive)
    },
    timeNavClick(val) {
      this.timeNavavActive = val
      this.time = ''
      this.$refs.tableViewRef.page = 1
      this.setSwitchApi(this.navActive)
    },
    exportClick() {
      this.$message({
        type: 'success',
        message: '正在导出请稍等!'
      });
      this.exportApi({
        "endTime": this.time == null ? '' : this.time[1],
        "keyword": this.keyword,
        "startTime": this.time == null ? '' : this.time[0],
        "type": this.timeNavavActive
      }).then((res) => {

        const result = this.navList.filter(item => item.value === this.navActive).map(item => item.name);
        this.getOutExcel(`${result + '.xlsx'}`, res)
      }).catch((err) => {
        this.$message({
        type: 'info',
        message: '导出失败!'
      });
      })
    },
    initClick() {
      this.time = ''
      this.keyword = ''
      this.$refs.tableViewRef.page = 1
      this.postData()
    },
    searchClick() {
      this.setSwitchApi(this.navActive)
    },
    setSwitchApi(val) {
      switch (val) {
        case 1:
          this.tableApi = qryProtectSchoolPage
          this.totleApi = qryProtectSchoolCount
          this.exportApi = exportProtectSchool
          break;
        case 2:
          this.tableApi = qryPointPage
          this.totleApi = qryPointCount
          this.exportApi = exportPoint
          break;
        case 3:
          this.tableApi = qryDoublePatrolPage
          this.totleApi = qryDoublePatrolCount
          this.exportApi = exportDoublePatrol
          break;
        case 4:
          this.tableApi = qryRoadListPage
          this.totleApi = qryRoadCount
          this.exportApi = roadExport
          break;
        case 5:
          this.tableApi = qryTrafficListPage
          this.totleApi = qryTrafficCount
          this.exportApi = trafficExport
          break;
        case 6:
          this.tableApi = qryTenListPage
          this.totleApi = qryTenCount
          this.exportApi = tenExport
          break;
        case 7:
          this.tableApi = qryPatrolPage
          this.totleApi = qryPatrolCount
          this.exportApi = exportPatrol
          break;
      }
      this.totleData()
      this.postData()
    },
    postData() {
      this.loading = true
      let apiObj = {
        "endTime": this.time == null ? '' : this.time[1],
        "keyword": this.keyword,
        "page": this.$refs.tableViewRef.page,
        "size": this.$refs.tableViewRef.pageSize,
        "startTime": this.time == null ? '' : this.time[0],
        "type": this.timeNavavActive
      }
      this.tableApi(apiObj).then((res) => {
        console.log(res)
        this.$refs.tableViewRef.tableData = res.data.content
        this.$refs.tableViewRef.total = res.data.totalElements
        this.loading = false
      }).catch((err) => {
        this.loading = false
      })
    },
    totleData() {
      this.totleApi({
        "endTime": this.time == null ? '' : this.time[1],
        "keyword": this.keyword,
        "startTime": this.time == null ? '' : this.time[0],
        "type": this.timeNavavActive
      }).then((res) => {
        this.$refs.tableViewRef.categoryList[0].value = res.data.sumCount
        this.$refs.tableViewRef.categoryList[1].value = res.data.schCount
        this.$refs.tableViewRef.categoryList[2].value = res.data.actCount
        this.$refs.tableViewRef.categoryList[3].value = res.data.excepCount
      })
    },
    handleCurrentChange() {
      this.postData()
    },
    getOutExcel(fileName, res) {
      let blob = new Blob([res], { type: 'application/x-xls' });
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        var link = document.createElement('a');
        const url = window.URL || window.webkitURL || window.moxURL
        link.href = url.createObjectURL(blob);
        link.download = fileName;
        link.click();
        url.revokeObjectURL(link.href);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.statistics {
  box-sizing: border-box;
  padding: 15px;

  .navBox {
    width: 100%;
    height: 60px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;

    .nav {
      width: 200px;
      height: 30px;
      text-align: center;
      border: 1px solid #409eff;
      color: #409eff;
      line-height: 30px;
      cursor: pointer;
      background: #fff;
      border-radius: 2px;
    }

    .active {
      background: #409eff;
      color: #fff;
    }
  }

  .timeNavBox {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;

    .timeNav {
      width: 80px;
      height: 27px;
      text-align: center;
      border: 1px solid rgb(218, 218, 218);
      color: #000;
      line-height: 27px;
      cursor: pointer;
      background: #fff;
      border-radius: 2px;
      margin-right: 20px;
      font-size: 14px;
    }

    .timeActive {
      color: #409eff;
      border: 1px solid #409eff;

    }
  }

  .searchBox {
    justify-content: space-between;

    .navBoxLeft {
      display: flex;
    }
  }
}
</style>